<template>
    <view class="demo-index" :style="[pageStyle, themeVars]">
        <cl-header title="组件演示" :left-show="true" :background-color="headerBgColor" :text-color="headerTextColor" @goback="handleGoBack" />

        <view class="hero">
            <view class="hero-title" :style="textPrimaryStyle">组件演示库</view>
            <view class="hero-sub" :style="textSecondaryStyle">点击进入对应组件的独立演示页面</view>
        </view>

        <view class="grid">
            <view class="card" :style="surfaceCardStyle" @click="go('/subpkg/demo/image/index')">
                <view class="icon">🖼️</view>
                <view class="content">
                    <view class="title" :style="textPrimaryStyle">cl-image</view>
                    <view class="desc" :style="textSecondaryStyle">图片加载、占位、懒加载与预览</view>
                </view>
                <u-icon name="arrow-right" size="18" :color="tokens.text.secondary" />
            </view>

            <view class="card" :style="surfaceCardStyle" @click="go('/subpkg/demo/empty/index')">
                <view class="icon">📭</view>
                <view class="content">
                    <view class="title" :style="textPrimaryStyle">cl-empty</view>
                    <view class="desc" :style="textSecondaryStyle">空状态占位与文案</view>
                </view>
                <u-icon name="arrow-right" size="18" :color="tokens.text.secondary" />
            </view>

            <view class="card" :style="surfaceCardStyle" @click="go('/subpkg/demo/list/index')">
                <view class="icon">📋</view>
                <view class="content">
                    <view class="title" :style="textPrimaryStyle">cl-list</view>
                    <view class="desc" :style="textSecondaryStyle">分页、触底加载、下拉刷新</view>
                </view>
                <u-icon name="arrow-right" size="18" :color="tokens.text.secondary" />
            </view>

            <view class="card" :style="surfaceCardStyle" @click="go('/subpkg/demo/login/index')">
                <view class="icon">🔐</view>
                <view class="content">
                    <view class="title" :style="textPrimaryStyle">cl-login</view>
                    <view class="desc" :style="textSecondaryStyle">登录/注册/找回密码</view>
                </view>
                <u-icon name="arrow-right" size="18" :color="tokens.text.secondary" />
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { useThemeStyles } from '@/composables/useThemeStyles/index'
import { useTheme } from '@/composables/useTheme'

const { pageStyle, surfaceCardStyle, headerBgColor, headerTextColor, textPrimaryStyle, textSecondaryStyle, tokens } = useThemeStyles()
const { getThemeVars } = useTheme()
const themeVars = computed(() => getThemeVars())

const handleGoBack = () => {
    uni.navigateBack()
}
const go = (url: string) => {
    uni.navigateTo({ url })
}
</script>

<style lang="scss" scoped>
@import '@/styles/theme.scss';

.demo-index {
    min-height: 100vh;
    background: var(--theme-background, $bg-gradient);
}

.hero {
    padding: $spacing-xl $spacing-lg $spacing-md;

    .hero-title {
        font-size: $font-size-xxl;
        font-weight: $font-weight-bold;
        color: var(--theme-text-primary, #fff);
    }

    .hero-sub {
        margin-top: $spacing-xs;
        color: var(--theme-text-secondary, rgba(255, 255, 255, 0.85));
        font-size: $font-size-md;
    }
}

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: $spacing-md;
    padding: 0 $spacing-lg $spacing-xxl;
}

.card {
    display: grid;
    grid-template-columns: 56rpx 1fr 40rpx;
    align-items: center;
    gap: $spacing-md;
    padding: $spacing-lg;
    border-radius: $border-radius-large;
    transition: transform $transition-normal;

    .icon {
        font-size: 40rpx;
    }

    .content {
        .title {
            font-size: $font-size-lg;
            font-weight: $font-weight-bold;
        }

        .desc {
            margin-top: 6rpx;
            color: var(--theme-text-secondary, $text-secondary);
            font-size: $font-size-sm;
        }
    }

    &:active {
        transform: scale(0.98);
    }
}

@media screen and (min-width: 750rpx) {
    .grid {
        grid-template-columns: 1fr 1fr;
    }
}
</style>
